<template>
  <div>
    <input type="text" :value="v">
     <input type="text" :value="v.toUpperCase()">
     <p>{{num}}</p>
     <button @click="num++">点击++num</button>
     <button @click="add">点击-1</button>
     <button @click="one(3,2,$event)">获取节点 传参</button>
     <br>
     <form action="">
        <input type="text" @keyup.enter = 'two'>
        <button @click.prevent = 'three'></button>
     </form>

     <div @click="change">{{start}}</div>
     <hr><br>
     <!-- 失去焦点，更新数据 -->
     <input type="text" v-model.lazy="first">
     <!-- 自动转换为数字 -->
     <input type="text" v-model.number="second">
     <!-- 去掉两边空格 -->
     <input type="text" v-model.trim="third">
     <hr><br>

    姓名：<input type="text" v-model="uname" /><br />

    性别：
    <input type="radio" name="sex" value="男" v-model="xingbie" />男生
    <input type="radio" name="sex" value="女" v-model="xingbie" />女生<br />

    爱好：
    <input type="checkbox" name="hobby" value="chifan" v-model="hobby" />吃饭
    <input type="checkbox" name="hobby" value="shuijiao" v-model="hobby" />睡觉
    <input type="checkbox" name="hobby" value="dadoudou" v-model="hobby" />打豆豆<br />

    籍贯：
    <select v-model="address">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="tj">天津</option></select
    ><br />

    状态：<input type="checkbox" v-model="state" />

     <div v-show="flag">哈哈</div>
     <div v-if="flag">嘿嘿</div>

     <div v-if="number>10">1</div>
     <div v-else-if='number>=15&&number<=20'>2</div>
     <div v-else>3</div>
  </div>

 
</template>

<script>
export default {
data () {
    return {
        v:'xsxsxs',
        num:0,
        start:'你好世界',
        first:'111',
        second:'222',
        third:'333',
        uname:'小小',
        xingbie:'男',
        hobby:['chifan','dadoudou'],
        address:'bj',
        state:true,
        flag:true,
        number:11
    }
},
methods: {
    add(){
        this.num--
        console.log(this);
        console.log(this._data.num);
        console.log(this.num);
    },
    one(n,m,e){
   console.log(n+m,e);
    },
    two(e){
        console.log(e.target.value);
    },
    three(){
        console.log(11);
    },
    change(){
      this.start = this.start.split('').reverse().join('')
    }
},
}
</script>

<style>

</style>